<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>


<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/general/devices.css"
      media="screen">

<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/devices.js"></script>
<script type="text/javascript" language="javascript"
        src="<%=request.getContextPath()%>/js/main/searchDevices.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var contentTopInt = parseFloat($("#content").css("margin-top").split("p")[0]);
        var footerTop = parseFloat($("#footer").css("margin-top").split("p")[0]);


        $("#infoForUse").css("color", "#cd0a0a");
        $("#deviceInfo").css("padding-right", "50px");
        var networkHeightInt = $("#networks").height() + footerTop + 23 + contentTopInt;
        var deviceInfoHeightInt = $("#deviceInfo").height() == 900 ? $("#deviceInfo").height() : ($("#deviceInfo").height() + footerTop + 23 + contentTopInt + 50);
        var contentTopInt = parseFloat($("#content").css("margin-top").split("p")[0]);
        $("#content").css("height", deviceInfoHeightInt > networkHeightInt ? deviceInfoHeightInt : networkHeightInt);
        $(".gradeX").hover(function() {
            $(this).css("cursor", "pointer");
        }, function() {

        })

        $(".gradeXDevices").live("dblclick", function() {
            var serial = $(this).find("input[name='serial']").val();
            var serialForView = $(this).find(".serialForView").text();
            $.ajax({
                url: "viewDeviceInfo.action",
                data:{
                    serial:serial,
                    serialForView:serialForView
                },
                type:"post",
                success:function(data) {
                    $("#deviceInfo").html("");
                    $("#deviceInfo").html(data);
                    $("input[name='selectedDevice']").val(serial);
                }
            });
        });
        var searchDevice;
        $("input[name='searchDevice']").focus(function() {
            searchDevice = $(this).val();
            if (searchDevice == "Serial Number") {
                $(this).val("");
            }

        });
        $("input[name='searchDevice']").blur(function() {
            if ($(this).val() == "") {
                $(this).val("Serial Number");
            }
        });

    });

</script>
<style type="text/css">

    #deviceInfo {
        margin-bottom: 0px;
        padding-top: 70px;
        padding-right: 20px !important;
        max-height: 950px !important;
    }

    .infoToDo {
        position: absolute;
        width: 200px;
        float: left;
        z-index: 100;
        opacity: 1;

    }

    #example {
        z-index: -1;
    }

    .gradeX {
        cursor: pointer;
    }

    #infoForUse {
        font-size: 12px;
        color: teal !important;
        font-family: Verdana;
        font-style: italic;
        margin-top: 250px;
    }

    #info {
        margin-left: 0px;
        margin-top: 30px;
        border: #212121 dashed 0px;
        width: 630px;
    }

    .gradeX {
        background: #add8e6;

    }

    thead tr {
        background: #ddd;
    }

    th {
        border: #ddd solid 2px;
        font-style: italic;
        font-weight: normal;
        max-width: 130px;
        min-width: 130px;
        min-width: 120px;
    }

    td {
        border: #87ceeb solid 2px;
        max-width: 130px;
        min-width: 130px;
        min-width: 120px;
    }

    .serialForView {
        min-width: 230px !important;
        max-width: 230px !important;
        min-width: 250px !important;
    }

    #searchDevice img {
        width: 23px !important;
        height: 23px !important;
    }

</style>
<s:if test="%{deviceList!=null}">
    <div class="infoToDo"></div>
    <div>
        <a href="#" id="searchDevice" style="float: right;margin-right: 10px;">
            <img src="<%=request.getContextPath()%>/images/find/search.png"/>
        </a>
        <input type="text" name="searchDevice"
               value="<s:if test="%{!isSerialEmpty()}"><s:property value="serial"/></s:if><s:else>Serial Number</s:else>"
               style="margin-top: 0px;margin-bottom:0px;height: 16px;width: 150px;float: right;"/>
    </div>
    <table class="info">
        <thead>
        <tr>
            <th class="serialForView"><s:text name="label.serialNumber"/></th>
            <th><s:text name="label.manufacturer"/></th>
            <th><s:text name="label.oui"/></th>
            <th><s:text name="label.productClass"/></th>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="deviceList" var="device" status="s_device">
            <tr class="gradeX gradeXDevices">
                <td class="serialForView">
                    <s:property value="#device.serialNumberForView"/>
                </td>
                <td>
                    <s:property value="#device.device.manufacturer"/>
                </td>
                <td>
                    <s:property value="#device.device.oui"/>
                </td>
                <td>
                    <s:property value="#device.device.productClass"/>
                </td>
                    <%--<input type="hidden" name="deviceId" value="<s:property value="#device.deviceId"/>"/>--%>
                <input type="hidden" name="serial" value="<s:property value="#device.device.serialNumber"/>"/>
            </tr>
        </s:iterator>
        </tbody>
    </table>

    <s:if test="%{countAllDevices>16}">
        <input type="hidden" name="searchedSerial" value="<s:property value='serial'/>"/>
        <input type="hidden" name="networkId" value="<s:property value='networkId'/>"/>

        <div class="navigator">
                <span class="page-info">
                    page &nbsp;
                    <s:property value="page"/>
                    &nbsp;/&nbsp;
                    <s:property value="maxPage"/>
                </span>

            <div class="navigator-control">
                <div style="float:right;">
                    <div class="left-arrows">
                        <s:if test="%{hasPrevious()}">
                            <a href="#" class="viewSearchedNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/first.gif" alt="first">
                                <input type="hidden" name="page" value="1"/>
                            </a>
                            &nbsp;
                            <a href="#" class="viewSearchedNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/prev.gif" alt="first">
                                <input type="hidden" name="page" value="<s:property value="%{page - 1}"/>"/>
                            </a>
                        </s:if>
                        <s:else>
                            <img src="<%=request.getContextPath()%>/images/paging/first_off.gif" alt="first">
                            &nbsp;
                            <img src="<%=request.getContextPath()%>/images/paging/prev_off.gif" alt="first">
                        </s:else>
                    </div>
                    <div style="float:left;">
                        <s:iterator var="i" begin="%{linkFirstNumber}" end="%{linkLastNumber}">
                            <s:if test="#i == page">
                                    <span class="pager_active">
                                        <s:property value="#i"/>
                                    </span>
                            </s:if>
                            <s:else>
                                <a href="#" class="viewSearchedNextDevices pager">
                                    <s:property value="#i"/>
                                    <input type="hidden" name="page" value="<s:property value="#i"/>"/>
                                </a>
                            </s:else>
                            <s:if test="!#st.last">,&nbsp;</s:if>
                        </s:iterator>
                    </div>
                    <div class="right-arrows">
                        <s:if test="%{hasNext()}">
                            <a href="#" class="viewSearchedNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/next.gif" alt="first">
                                <input type="hidden" name="page" value="<s:property value="%{page + 1}"/>"/>
                            </a>
                            &nbsp;
                            <a href="#" class="viewSearchedNextDevices">
                                <img src="<%=request.getContextPath()%>/images/paging/last.gif" alt="first">
                                <input type="hidden" name="page" value="<s:property value="maxPage"/>"/>
                            </a>
                        </s:if>
                        <s:else>
                            <img src="<%=request.getContextPath()%>/images/paging/next_off.gif" alt="first">
                            &nbsp;
                            <img src="<%=request.getContextPath()%>/images/paging/last_off.gif" alt="first">
                        </s:else>
                    </div>
                </div>
            </div>
        </div>
    </s:if>
    <div id="infoForUse">
        **For more information about each device ,you should double click on the appropriate row
    </div>
    <input type="hidden" name="usersType" value="<s:property value="#session.user.userType.value"/>"/>
</s:if>
<s:else>
    <s:text name="msg.notchoosing.network"/>
</s:else>
